<template>
  <div v-if="!hiddenSettings" class="je-admin-settings-theme">
    <ThemeColor
      mode="systemTheme"
      title="系统色调"
      @toggle-theme-color="toggleThemeColor"
    ></ThemeColor>
    <ThemeColor
      mode="siderTheme"
      title="菜单色调"
      @toggle-theme-color="toggleThemeColor"
    ></ThemeColor>
    <!-- <ThemeMode mode="darkMode" title="深色主题"></ThemeMode>
    <ThemeMode mode="grayMode" title="灰色模式"></ThemeMode>
    <ThemeMode mode="colorWeak" title="色弱模式"></ThemeMode> -->
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import ThemeColor from '@common/components/theme/theme-color.vue';
  // import ThemeMode from '@common/components/theme/theme-mode.vue';
  import { useUserConfigStore } from '@/stores/user-config-store';
  import { getSystemConfig } from '@jecloud/utils';
  export default defineComponent({
    name: 'AdminSettingsTheme',
    components: {
      // ThemeMode,
      ThemeColor,
    },
    setup() {
      const userConfigStore = useUserConfigStore();
      // 读取系统变量进行设置
      const themeSettings = getSystemConfig('variables')?.JE_SYSTEM_THEME_SETTINGS;
      const hiddenSettings = themeSettings == '0';
      const methods = {
        toggleThemeColor({ mode, item }) {
          switch (mode) {
            case 'systemTheme':
              userConfigStore.setSystemTheme(item.code);
              break;
            case 'siderTheme':
              userConfigStore.setSiderTheme(item.code);
              break;
          }
        },
      };
      return { ...methods, hiddenSettings };
    },
  });
</script>
